<template>
	<div class="register">
		<van-nav-bar title="注册" left-text="返回" left-arrow v-goBack/>
		<van-form>
			<!-- 用户名 -->
			<van-field v-model="formData.name" name="name" label="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />

			<!-- 密码 -->
			<van-field v-model="formData.pwd" type="password" name="pwd" label="密码" :rules="[{ required: true, message: '请填写密码' }]" />

			<!-- 邮箱 -->
			<van-field name="email" v-model="formData.email" center clearable label="邮箱" :rules="[{required: true, message: '请填写邮箱' },{validator:validatorEmail,message:'请输入正确的邮箱'}]">
				<template #button>
					<van-button native-type="button" size="small" type="primary" @click="sendCode" :disabled="timeBool">{{timeBool ? num + "秒" : '发送验证码'}}</van-button>
				</template>
			</van-field>

			<!-- 电话 -->
			<van-field v-model="formData.phone" name="phone" label="电话" :rules="[{ required: true, message: '请填写电话' }]" />


			<!-- 性别 -->
			<van-field name="sex" label="性别">
				<template #input>
					<van-radio-group v-model="formData.sex" direction="horizontal">
						<van-radio name="1">男</van-radio>
						<van-radio name="2">女</van-radio>
					</van-radio-group>
				</template>
			</van-field>

			<!-- 生日 -->
			<van-field v-model="formData.birth" name="birth" center clearable label="生日" placeholder="请选择日期" @focus="bool=true" />
			<van-popup v-model="bool" position="bottom" :style="{width:'100%',height: '50%' }">
				<van-datetime-picker v-if="bool" v-model="currentDate" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate" @confirm="confirm" @cancel="bool=false"/>
			</van-popup>
			
			<!-- 验证码 -->
			<van-field v-model="formData.code" name="code" label="验证码" :rules="[{ required: true, message: '请填写验证码' }]" />
			


			<div style="margin: 16px;">
				<van-button round block type="info" native-type="submit" v-throttle:click="[onSubmit,3000]">提交</van-button>
			</div>
		</van-form>
	</div>
</template>

<script>
	import * as api from "api/register.js"
	import {formDate} from "@/utils/formDate.js"
	export default {
		data() {
			return {
				formData:{
					name: "",
					pwd: "",
					email: "",
					phone: "",
					code: "",
					sex: "1",
					birth: "",
				},
				bool: false,
				minDate: new Date(2020, 0, 1),
				maxDate: new Date(2025, 10, 1),
				currentDate: new Date(),
				num:5,
				timeBool:false
			}
		},
		methods: {
			async onSubmit() {//提交

				let res = await api.register(this.formData)

				if(res.data.code === 1000){
					this.$toast.success(res.data.msg);
				}else{
					this.$toast.fail(res.data.msg);
				}
			},
			validatorEmail(val){//校验邮箱
				return /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(val)
			},
			confirm(val){
				this.formData.birth = formDate(val)
				this.bool = false
			},
			async sendCode(){//发送验证码
				let res = await api.sendCode({
					email:this.formData.email
				})

				if(res.data.code === 1000){
					this.$toast.success(res.data.msg);
					this.timeBool = true
					
					let timeHandler = setInterval(()=>{
						
						if(this.num>0){
							this.num--
						}else{
							clearInterval(timeHandler)
							this.timeBool = false
							this.num = 5
						}
					},1000)
				}else{
					this.$toast.fail(res.data.msg);
				}
				
			}
		}
	}
</script>

<style>
</style>
